<template>
	<view class="roc-date-picker-range">
		<view class="roc-date-picker-range-box">
			<!-- 开始时间 -->
			<view @click="handleDatePickerShow('0')">
				<u-input
					v-model="startValue"
					disabled
					disabledColor="#ffffff"
					:placeholder="item.props.placeholder || '请选择开始时间'"
					:clearable="item.props.clearable || true"
					border="none"
				></u-input>
			</view>
			<uni-icons
				class="uni-icons"
				@click="handleClearable('0')"
				v-if="(item.props.clearable || true) && !item.props.readonly && !item.props.disabled && startValue"
				type="clear"
				color="#e1e1e1"
				size="14"
			></uni-icons>
		</view>
		<!-- 结束时间 -->
		<view class="roc-date-picker-range-box">
			<view @click="handleDatePickerShow('1')">
				<u-input
					v-model="stopValue"
					disabled
					disabledColor="#ffffff"
					:placeholder="item.props.placeholder || '请选择结束时间'"
					:clearable="item.props.clearable || true"
					border="none"
				></u-input>
			</view>
			<uni-icons
				class="uni-icons"
				@click="handleClearable('1')"
				v-if="(item.props.clearable || true) && !item.props.readonly && !item.props.disabled && stopValue"
				type="clear"
				color="#e1e1e1"
				size="14"
			></uni-icons>
		</view>
		<!-- 弹窗相关 -->
		<u-datetime-picker
			:show="datePickerShow"
			itemHeight="88"
			:mode="datePickerType"
			closeOnClickOverlay
			@cancel="datePickerCancel"
			@close="datePickerCancel"
			@confirm="datePickerConfirm"
		></u-datetime-picker>
	</view>
</template>

<script>
export default {
	name: 'roc-date-picker-range',
	props: {
		item: {
			type: Object,
			default() {
				return {};
			}
		},
		value: {
			type: String,
			default: ''
		}
	},
	watch: {
		value: {
			handler(newVal) {
				this.startValue = newVal.split('&')[0] ?? '';
				this.stopValue = newVal.split('&')[1] ?? '';
			},
			immediate: true
		}
	},
	data() {
		return {
			// 日期选择器是否显示
			datePickerShow: false,
			// 日期选择器的类型
			datePickerType: '',
			// 开始结束状态   0开始 1结束
			startOrStop: '',
			startValue: '',
			stopValue: ''
		};
	},
	methods: {
		// 处理清空选中值
		handleClearable(type) {
			if(type == '0') {
				// 开始
				this.startValue = ''
			} else {
				// 结束
				this.stopValue = ''
			}
			if(this.startValue == '' && this.stopValue == '') {
				this.$emit('input', '');
			}
		},
		// 处理 日期选择器 显示 & 规则
		handleDatePickerShow(type) {
			if (this.item.props.readonly || this.item.props.disabled) return;
			this.startOrStop = type
			this.datePickerShow = true;
			this.handleDatePickerType(this.item.props.type);
		},
		// 处理 日期选择器的类型
		handleDatePickerType(val) {
			if (val == 'datetime') {
				this.datePickerType = 'datetime';
			} else if (val == 'date') {
				this.datePickerType = 'date';
			} else if (val == 'month') {
				this.datePickerType = 'year-month';
			} else {
				this.datePickerType = 'date';
			}
		},
		// 日期选择器 取消 | 关闭
		datePickerCancel() {
			this.datePickerShow = false;
		},
		// 日期选择器 确定 | 关闭
		datePickerConfirm(e) {
			// this.$set(this.form, this.item.field, this.datePickerResult(e.value, e.mode));
			if(this.startOrStop == '0') {
				// 开始
				this.startValue = this.datePickerResult(e.value, e.mode)
			} else {
				// 结束
				this.stopValue = this.datePickerResult(e.value, e.mode)
			}
			this.datePickerShow = false;
			
			this.$emit('input', `${this.startValue}&${this.stopValue}`);
		},
		// 日期时间确定后返回的数据格式处理
		datePickerResult(time, mode) {
			const timeFormat = uni.$u.timeFormat;
			switch (mode) {
				case 'datetime':
					return timeFormat(time, 'yyyy-mm-dd hh:MM');
				case 'date':
					return timeFormat(time, 'yyyy-mm-dd');
				case 'year-month':
					return timeFormat(time, 'yyyy-mm');
				case 'time':
					return time;
				default:
					return '';
			}
		}
	}
};
</script>

<style lang="scss">
.roc-date-picker-range {
	width: 100%;
	.roc-date-picker-range-box {
		position: relative;
		width: 100%;
		margin: 10rpx 0;
		.uni-icons {
			position: absolute;
			right: 0;
			top: 50%;
			z-index: 9;
			transform: translateY(-50%);
		}
	}
}

</style>
